<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>京东登录页</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#d1 {
				float: left;
				margin-left: 150px;
			}

			#d1 h3 {
				float: right;
				text-indent: 2em;
				height: 60px;
				line-height: 60px;
				color: gray;
			}

			#d2 {
				background-image: url(images/banner.png);
				background-repeat: no-repeat;
				background-size: auto;
				height: 475px;
				width: 990px;
				position: relative;
				top: 80px;
				/* border: 1px solid white;
				background-color: white; */
			}

			#d3 {
				float: right;
				width: 400px;
				height: 320px;
				background-color: white;
				margin-right: 100px;
				margin-top: 50px;
			}

			h2 {
				color: #808080;
				float: left;
				margin-left: 15px;
				margin-top: 15px;
				opacity: 0.6;
			}

			span {
				color: red;
				float: right;
				margin-left: 160px;
			}

			#d2 #d3 .c1 {
				float: left;
				margin-left: 20px;
				margin-top: 40px;
			}

			#d2 #d3 .c2 {
				float: left;
				margin-left: 20px;
				margin-top: 3px;
			}

			#d2 #d3 .c4 {
				float: left;
				margin-left: -282px;
				margin-top: 83px;
				color: gray;
				opacity: 0.6;
			}

			#d2 #d3 .c5 {
				float: right;
				margin-right: 28px;
				margin-top: 41px;
				color: gray;
				opacity: 0.6;
			}

			#d2 #d3 .c6 {
				background-color: #FF0000;
				color: white;
				width: 340px;
				height: 45px;
				position: absolute;
				margin-top: 257px;
				text-align: center;
				line-height: 45px;
				font-size: 30px;
				margin-left: 28px;

			}

			.c7 {
				position: absolute;
				top: 580px;
				left: 70px;
				
			}
			.c7 a{
				text-decoration: none;
				color: #666666;
			}
			.c8{
				position: absolute;
				top: 614px;
				left: 283px;
				color: #666666;
			}
			.c9{
				position: absolute;
				right: 237px;
				top: 72px;
				opacity: 1;
			}
			#d2 #d3 form .c1 input{
				width: 240px;
				height: 32px;
				float: right;
			}
			#d2 #d3 form .c2 input{
				width: 240px;
				height: 32px;
				float: right;
			}
			
			
		</style>
	</head>
	<body>
		<div id="d1">
			<img src="images/logo.png">
			<h3>欢迎登陆</h3>
		</div>
		<div id="d2">
			<div id="d3">
				<h2>京东会员<a href=""><img src="images/icon5.jpg" class="c9"><span>立即注册</span></a></h2>
				<form action="" method="post" id="loginForm">
					<p class="c1"><img src="images/icon1.jpg"><input type="text" name="name" placeholder="邮箱/用户名/已验证手机"/></p>
					<p class="c2"><img src="images/icon2.jpg"><input type="password" name="pass"/></p>
					<h3 class="c4"><input type="radio" name="gen" value="自动登录" />自动登录</h3>
					<h3 class="c5">忘记密码?</h3>
					<p class="c6">登录</p>
			</div>
		</div>
		<p class="c7">
			<a href="#">关于我们</a>|
			<a href="#">联系我们</a>|
			<a href="#">人才招聘</a>|
			<a href="#">商家入驻</a>|
			<a href="#">广告服务</a>|
			<a href="#">手机京东</a>|
			<a href="#">友情链接</a>|
			<a href="#">销售联盟</a>|
			<a href="#">京东社区</a>|
			<a href="#">京东公益</a>|
			<a href="#">English Site</a>
		</p>
		<p class="c8">
			Copyright?2004-2017 京东JD.com 版权所有
		</p>
	</body>
</html>
